<template>
  <view>
    <myheader color="#ffe"></myheader>
    <!-- icon图标 -->
    <view class="control">
      <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
        activeColor="#000"></uni-segmented-control><text class="back" @click="back">取消</text>
      <view class="content" :style="{height:iconHeight+'px'}">
        <view v-show="current === 0">
          <view class="icon">
            <myicon ref="myicon" :iconObj="iconObj" @handleIcon='handleIcon' :flage="true"></myicon>
          </view>
        </view>
        <view v-show="current === 1">
          <view class="icon">
            <myicon ref="myicon1" :iconObj="iconObj" @handleIcon1='handleIcon1' :flage="false"></myicon>
          </view>
        </view>
      </view>
    </view>
    <!-- 计算器 -->
    <view class="calculator">
      <view class="money" v-show="money">{{num}}{{money}}</view>
      <view class="money" v-show="!money">0.00</view>
      <view class="beizu">
        <label>
          <text style="white-space: nowrap;">备注:</text>
          <input type="text" maxlength="15" v-model="value" placeholder="点击写备注....">
        </label>
      </view>
      <!-- 表格 -->
      <view class="table">
        <table cellspacing=0 cellpadding=0>
          <tr>
            <th @click="handleMoney('1')">1</th>
            <th @click="handleMoney('2')">2</th>
            <th @click="handleMoney('3')">3</th>
            <th>
              <picker mode="date" :value="date" start="1900-01-01" end="2100-12-31" @change="bindDateChange">
                <view style="font-size: 12px;" v-show="date&&date!=time">{{date}}</view>
                <view class="rili" v-show="!date||date==time">
                  <image src="@/static/icon/rili.png" style="width: 20px; height: 20px;"></image>
                  <text>今天</text>
                </view>
              </picker>
            </th>
          </tr>
          <tr>
            <th @click="handleMoney('4')">4</th>
            <th @click="handleMoney('5')">5</th>
            <th @click="handleMoney('6')">6</th>
            <th @click="operation('+')">+</th>
          </tr>
          <tr>
            <th @click="handleMoney('7')">7</th>
            <th @click="handleMoney('8')">8</th>
            <th @click="handleMoney('9')">9</th>
            <th @click="operation('-')">-</th>
          </tr>
          <tr>
            <th @click="handleMoney('.')">.</th>
            <th @click="handleMoney('0')">0</th>
            <th @click="del">
              <image src="@/static/icon/del.png" style="width: 30px;height: 30px;"></image>
            </th>
            <th>
              <text v-show="flg" @click="over">=</text>
              <text v-show="!flg" @click="add">完成</text>
            </th>
          </tr>
        </table>
      </view>
    </view>
    <uni-popup ref="popup" type="dialog">
      <uni-popup-dialog message="成功消息" cancelText="关闭" title="通知" content="小笨蛋是不是有什么没有填"></uni-popup-dialog>
    </uni-popup>
    <uni-popup ref="message" type="message">
      <uni-popup-message :message="message"></uni-popup-message>
    </uni-popup>
  </view>
</template>

<script>
  import {
    year,
    month,
    day
  } from "@/utils/fromDate.js"
  export default {
    data() {
      return {
        current: 0,
        items: ['支出', '收入'],
        value: '',
        money: '',
        num: '',
        date: '',
        time: '',
        name: '',
        icon: '',
        name1: '',
        icon1: '',
        message: '',
        iconObj: {},
        iconHeight: '',
      }
    },
    watch: {

    },
    created() {
      this.update()
    },
    mounted() {
      this.time = `${year}-${month}-${day}`
      let height = uni.getSystemInfoSync().screenHeight
      const query = uni.createSelectorQuery().in(this);
      // 获取元素到距离顶部的距离
      query.select('.calculator').boundingClientRect(data => {
        // 动态计算出 滚动区域的高度
        this.iconHeight = Math.round(height - data.height - 36)
        // console.log(data);
      }).exec();
    },
    computed: {
      // 判断是否是一个计算式
      flg() {
        let s = this.money.charAt(0)
        if (this.money.length > 1 && (s == '-' || s == '+')) {
          return true
        } else {
          return false
        }
      }
    },
    methods: {
      // 判断是否为修改
      update() {
        let tally = uni.getStorageSync('tally')
        if (tally.id) {
          // console.log(tally.date);
          this.money = tally.money
          this.date = tally.date
          this.current = tally.type
          this.value = tally.value
          this.iconObj = {
            type: tally.type,
            name: tally.name
          }
          // console.log(1);
        }
      },

      handleIcon1(e) {
        this.name1 = e.name
        this.icon1 = e.icon
      },
      // 获取icon组件的数据
      handleIcon(e) {
        this.name = e.name
        this.icon = e.icon
      },
      // tab栏切换
      onClickItem(e) {
        if (this.current != e.currentIndex) {
          this.current = e.currentIndex;
        }
      },
      // 整理数据
      disposal() {
        let {
          money,
          current,
          value,
          date,
          time,
          icon,
          icon1,
          name1,
          name
        } = this
        return new Promise((res, rej) => {
          let tally = {}
          if (/^\+|\-/.test(money)) {
            this.$refs.popup.open()
          } else {
            if (money !== '') {
              if (icon !== '' || icon1 !== '') {
                if (current == 0) {
                  tally.icon = icon
                  tally.name = name
                } else {
                  tally.icon = icon1
                  tally.name = name1
                }
                if (date) {
                  let arr = date.split('-')
                  tally.year = arr[0]
                  tally.month = arr[1]
                  tally.day = arr[2]
                  // console.log(arr,tally);
                } else {
                  tally.year = year
                  tally.month = month
                  tally.day = day
                }
                tally.money = money
                tally.type = current
                tally.value = value
                res(tally)
              } else {
                this.$refs.popup.open()
              }
            } else {
              this.$refs.popup.open()
            }
          }

        })
      },
      // 添加记录
      add() {
        this.disposal().then(async data => {
          let tally = uni.getStorageSync('tally')
          if (tally.id) {
            this.$store.dispatch('updataTally', [tally.id, data]).then(res => {
              if (res.code == 200) {
                this.message = '修改成功拉小笨蛋'
                this.$refs.message.open()
                uni.removeStorageSync('tally')
                uni.switchTab({
                  url:"/pages/particulars/index"
                })
              } else {
                this.message = '出现BUG了快来找我把小笨蛋'
                this.$refs.message.open()
              }
            })
          } else {
            this.$store.dispatch('addTally', data).then(res => {
              if (res.code == 200) {
                this.message = '记录成功拉小笨蛋'
                this.$refs.message.open()
                uni.switchTab({
                  url:"/pages/particulars/index"
                })
              } else {
                this.message = '出现BUG了快来找我把小笨蛋'
                this.$refs.message.open()
              }
            })
          }
        }).then(() => {
          this.money = ''
          this.date = ''
          this.value = ''
          this.$refs.myicon.active = -1
          this.$refs.myicon1.active1 = -1
        })
      },
      // 返回
      back() {
        uni.navigateBack({
          delta: 1
        })
      },

      // 日期选择
      bindDateChange(e) {
        this.date = e.detail.value
      },

      // 金额
      handleMoney(str) {
        if (this.money.length < 6) {
          if (this.money == '') {
            if (str == '.') {
              this.money = '0.'
            } else {
              this.money = str
            }
          } else {
            let s = this.money.charAt(this.money.length - 1)
            if (s == '.' || s == '+' || s == '-') {
              if (str == ".") {
                this.money
              } else {
                this.money += this.dian(this.money, str)
              }
            } else {
              this.money += this.dian(this.money, str)
            }
          }
        }

      },
      // 去点.
      dian(str, s) {
        if (s == '.') {
          if (str.indexOf('.') != -1) {
            return ''
          } else {
            return '.'
          }
        } else {
          return s
        }
      },
      // 符号
      operation(symbol) {
        let str = this.money.charAt(this.money.length - 1)
        if (str == '.' || str == '+' || str == '-') {
          return
        } else {
          if (this.money == '') {
            this.num = '0'
            this.money = symbol
          } else {
            if (/\+|\-/.test(this.money)) {
              if (this.money.indexOf('-') != -1) {
                this.num = (parseFloat(this.num) - parseFloat(this.money.substring(1))).toFixed(2) + ''
                this.num = this.isNum(this.num)
              } else {
                this.num = (parseFloat(this.num) + parseFloat(this.money.substring(1))).toFixed(2) + ''
                this.num = this.isNum(this.num)
              }
              this.money = symbol
            } else {
              this.num = this.money
              this.money = symbol
            }
          }
        }
      },
      // 计算
      over() {
        if (this.money.indexOf('-') != -1) {
          this.money = (parseFloat(this.num) - parseFloat(this.money.substring(1))).toFixed(2) + ''
          this.money = this.isNum(this.money)
        } else {
          this.money = (parseFloat(this.num) + parseFloat(this.money.substring(1))).toFixed(2) + ''
          this.money = this.isNum(this.money)
        }
        this.num = ''
      },
      // 判断小数位数
      isNum(str) {
        let num = str.substring(str.indexOf('.') + 1)
        if (num == '00') {
          console.log(str.substring(0, str.indexOf('.')));
          return str.substring(0, str.indexOf('.'))
        } else {
          return str
        }
      },
      // 删除
      del() {
        let s = this.money.substring(this.money - 1)
        if (s == '+' || s == '-') {
          this.money = this.num
          this.num = ''
        } else {
          this.money = this.money.slice(0, this.money.length - 1)
        }
      }
    },
  }
</script>

<style lang="scss" scoped>
  .iocn {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: center;
  }

  .control {
    // background-color: #0ff;
    position: relative;

    ::v-deep .segmented-control__item--text {
      padding: 5px 0;
      border-bottom-width: 2px;
    }

    ::v-deep .segmented-control {
      justify-content: center;
      background-color: #ffe;
      padding: 0 0 8px;
    }

    ::v-deep .segmented-control__item {
      width: 25%;
      flex: none;

    }

    .back {
      font-size: 14px;
      font-weight: bold;
      position: absolute;
      top: 5px;
      right: 20px;
    }

    .content {
      // margin: 5px 0;
      overflow: auto;
    }
  }

  .calculator {
    width: 100%;
    position: fixed;
    bottom: 2px;
    background-color: #ffe;

    .beizu {
      padding: 0 20px 20px;

      label {
        padding: 8px;
        // height: 30px;
        border-radius: 8px;
        background: #ffa;
        display: flex;
        align-items: center;

        // justify-content: center;
        input {
          padding-left: 10px;
          width: 100%;
          // font-size: 13px;
          color: #333;
        }
      }
    }

    .money {
      // border: ;
      padding: 10px;
      font-size: 24px;
      font-weight: bold;
      text-align: right;
    }

    .table {

      // width: 100;
      // position: fixed;
      table {
        width: 100%;

        tr {
          width: 100%;

          th {
            border-top: 1px solid #eee;
            border-left: 1px solid #eee;
            width: 25%;
            height: 60px;
          }

          .rili {
            display: flex;
            align-items: center;
            justify-content: space-evenly;
          }
        }
      }
    }
  }
</style>
